import React, { useEffect, useState } from 'react';
import { Button, Select, Form, Input, DatePicker, Card, Table, message, Tag, Drawer, Tabs } from 'antd';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
import type { ColumnsType } from 'antd/es/table';
import * as service from '../../../../api/cyyindex'
import { useNavigate } from 'react-router-dom';
import './record.scss'

const { Search } = Input;
const { RangePicker } = DatePicker;
interface Props {

}
interface DataType {
  eid: number;
  name: string;
  age: number;
  address: string;
  tags: string[];
  flag: boolean
}
function Record(props: Props) {
  const navigate = useNavigate()
  const [messageApi, contextHolder] = message.useMessage();
  const [recordlist, setRecordlist] = useState([])
  useEffect(() => {
    service.record_list1().then((res: any) => {
      console.log(res)
      setRecordlist(res.data.data)
    })

  }, [])
  const myEdit = (id: any) => { 
   
    navigate({ pathname: '/index/staff/recordadd', search: `?id=${id}&num=1` } ) 
  }
  const myEdit1 = (id: any) => { 
   
    navigate({ pathname: '/index/staff/recordadd', search: `?id=${id}&num=2` } ) 
  }
  const myEdit2 = (id: any) => { 
   
    navigate({ pathname: '/index/staff/recordadd', search: `?id=${id}&num=3` } ) 
  }
  const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {
    if (dates) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    } else {
      console.log('Clear');
    }
  };
  const rangePresets: {
    label: string;
    value: [Dayjs, Dayjs];
  }[] = [
      { label: '今天', value: [dayjs().add(0, 'd'), dayjs()] },
      { label: '昨天', value: [dayjs().add(-1, 'd'), dayjs()] },
      { label: '近3天', value: [dayjs().add(-3, 'd'), dayjs()] },
      { label: '最近一周', value: [dayjs().add(-7, 'd'), dayjs()] },
      { label: '最近一个月', value: [dayjs().add(-30, 'd'), dayjs()] },
      { label: '最近三个月', value: [dayjs().add(-90, 'd'), dayjs()] },
    ];
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onSearch = (value: string) => console.log(value);

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const mySea = async (id: any) => {
    var res = await service.record_delete1({ eid: id })
    console.log(res)
    if (res.status == 200) {
      messageApi.open({
        type: 'success',
        content: '已删除',
      });
      service.record_list1().then((res: any) => {
        console.log(res)
        setRecordlist(res.data.data)
      })
    }
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',

    },
    {
      title: '员工编号',
      dataIndex: 'jodnumber',
      key: 'jodnumber',
    },
    {
      title: '部门',
      dataIndex: 'section',
      key: 'section',
    },

    {
      title: '职位',
      key: 'station',
      dataIndex: 'station',
    },
    {
      title: '学历',
      key: 'education',
      dataIndex: 'education',
    },

    {
      title: '毕业院校',
      key: 'school',
      dataIndex: 'school',
    },
    {
      title: '专业',
      key: 'major',
      dataIndex: 'major',
    },
    {
      title: '开始时间',
      key: 'starttime',
      dataIndex: 'starttime',
    },
    {
      title: '结束时间',
      key: 'endtime',
      dataIndex: 'endtime',
    },
    {
      title: '教育类型',
      key: 'type',
      dataIndex: 'type',
    },
    {
      title: '是否取得学位',
      key: 'flag',
      dataIndex: 'flag',
      render: (_, record) => {
        return (
          <>
            {
              record.flag ? <p>是</p> : <p>否</p>
            }
          </>
        )
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>

          <Tag onClick={() => {myEdit(record.eid)}} >编辑</Tag>
          <Tag onClick={() => { mySea(record.eid) }}>删除</Tag>
        </>
      ),
    },
  ];
  const columns1: ColumnsType<DataType> = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',

    },
    {
      title: '员工编号',
      dataIndex: 'wokers',
      key: 'wokers',
    },
    {
      title: '部门',
      dataIndex: 'section',
      key: 'section',
    },

    {
      title: '职位',
      key: 'station',
      dataIndex: 'station',
    },
    {
      title: '公司名称',
      key: 'company',
      dataIndex: 'company',
    },

    {
      title: '离职时职位',
      key: 'job',
      dataIndex: 'job',
    },
    {
      title: '入职日期',
      key: 'boarddate',
      dataIndex: 'boarddate',
    },
    {
      title: '离职日期',
      key: 'termdate',
      dataIndex: 'termdate',
    },
    {
      title: '工作时长',
      key: 'time',
      dataIndex: 'time',
    },
    {
      title: '离职薪资(元)',
      key: 'money',
      dataIndex: 'money',
    },


    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>

          <Tag onClick={()=>{myEdit1(record.eid)}}>编辑</Tag>
          <Tag onClick={() => { mySea(record.eid) }}>删除</Tag>
        </>
      ),
    },
  ];
  const columns2: ColumnsType<DataType> = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',

    },
    {
      title: '员工编号',
      dataIndex: 'wokers',
      key: 'wokers',
    },
    {
      title: '部门',
      dataIndex: 'section',
      key: 'section',
    },

    {
      title: '职位',
      key: 'station',
      dataIndex: 'station',
    },
    {
      title: '学历',
      key: 'education',
      dataIndex: 'education',
    },

    {
      title: '证书名称',
      key: 'certificate',
      dataIndex: 'certificate',
    },
    {
      title: '证书类型',
      key: 'certificatetype',
      dataIndex: 'certificatetype',
    },
    {
      title: '发证机构',
      key: 'authority',
      dataIndex: 'authority',
    },
    {
      title: '证书编号',
      key: 'number',
      dataIndex: 'number',
    },

    {
      title: '证书有效期',
      key: 'id',
      dataIndex: 'id',
      render: (_, record) => {
        return (
          <>
            <p>永久</p>
          </>
        )
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>

          <Tag onClick={()=>{myEdit2(record.eid)}} style={{cursor:'pointer'}}>编辑</Tag>
          <Tag onClick={() => { mySea(record.eid) }} style={{cursor:'pointer'}}>删除</Tag>
        </>
      ),
    },
  ];
  const handleChange1 = (value: string) => {
    console.log(`selected ${value}`);
  };
  const handleChange2 = (value: string) => {
    console.log(`selected ${value}`);
  };
  const handleChange3 = (value: string) => {
    console.log(`selected ${value}`);
  };
  const handleChange4 = (value: string) => {
    console.log(`selected ${value}`);
  };

  const items = [
    {
      key: '1',
      label: `教育经历`,
      children:
        <>
         
          <Table columns={columns} dataSource={recordlist} />
        </>,
    },
    {
      key: '2',
      label: `工作经历`,
      children: <>
       
        <Table columns={columns1} dataSource={recordlist} />
      </>,
    },
    {
      key: '3',
      label: `员工证书`,
      children: <>
      
        <Table columns={columns2} dataSource={recordlist} />
      </>,
    },
  ];

  return (
    <div className='record'>
     <p className='title'>员工档案</p>
      {/* 顶部搜索 */}
      <div className='box'>
      <Form
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            layout='inline'
          >
            <Form.Item
              label="职位"
              name="zhiwei"
              style={{ marginLeft: 30, marginTop: 10 }}
            >
              <Select
                defaultValue="请选择"
                style={{ width: 200 }}
                onChange={handleChange}
                options={[
                  { value: '产品经理', label: '产品经理' },
                  { value: '设计主管', label: '设计主管' },
                  { value: '设计师', label: '设计师' },
                  { value: '前台', label: '前台', },
                ]}
              />
            </Form.Item>

            <Form.Item
              label="职务"
              name="zhiwu"
              style={{ marginLeft: 30, marginTop: 10 }}
            >
              <Select
                defaultValue="请选择"
                style={{ width: 200 }}
                onChange={handleChange1}
                options={[
                  { value: '001', label: '员工' },
                  { value: '002', label: '经理' },
                  { value: '003', label: '办事员' },
                  { value: '004', label: '董事', },
                ]}
              />
            </Form.Item>
            <Form.Item
              label="职级"
              name="zhiji"
              style={{ marginLeft: 30, marginTop: 10 }}
            >
              <Select
                defaultValue="请选择"
                style={{ width: 200 }}
                onChange={handleChange2}
                options={[
                  { value: '10', label: 'P1' },
                  { value: '20', label: 'P2' },
                  { value: '30', label: 'P3' },
                  { value: '40', label: 'P4', },
                ]}
              />
            </Form.Item>
            <Form.Item style={{ marginLeft: 100, marginTop: 10 }}>
              <Button type="primary" htmlType="submit" onClick={() => { navigate("/index/staff/recordadd") }}>
                新增员工
              </Button>
              <Button type="primary" htmlType="submit">
                导入
              </Button>
              <Button type="primary" htmlType="submit">
                导出
              </Button>
            </Form.Item>
            <Form.Item
              label="部门"
              name="bumen"
              style={{ marginLeft: 30, marginTop: 10 }}
            >
              <Select
                defaultValue="请选择"
                style={{ width: 200 }}
                onChange={handleChange3}
                options={[
                  { value: '11', label: '行政' },
                  { value: '21', label: '人事' },
                  { value: '31', label: '策划' },
                  { value: '41', label: '产品', },
                  { value: '51', label: '设计', },
                  { value: '61', label: '研发', },
                ]}
              />
            </Form.Item>
            <Form.Item
              style={{ marginLeft: 30, marginTop: 10 }}
              label="工作地点"
              name="address"
            >
              <Select
                defaultValue="请选择"
                style={{ width: 200 }}
                onChange={handleChange4}
                options={[
                  { value: '12', label: '总公司  总部' },
                  { value: '23', label: '杭州分部  分公司' },
                  { value: '34', label: '海南分部  分公司' },
                  { value: '44', label: '天津分部  办事处' },
                ]}
              />
            </Form.Item>
            <Form.Item
              style={{ marginLeft: 30, marginTop: 10 }}
              label="选择日期"
              name="date"
            >
              <RangePicker presets={rangePresets} onChange={onRangeChange} />
            </Form.Item>
            <Form.Item
              style={{ marginLeft: 30, marginTop: 10 }}
              name="search"
            >
              <Search placeholder="请输入搜索内容" onSearch={onSearch} style={{ width: 200 }} />

            </Form.Item>
          </Form>

      <div style={{ marginTop: 20 }}>
        <Tabs defaultActiveKey="1" items={items} type="card" >

        </Tabs>

      </div>


      {/* 表格 */}

      {contextHolder}
      </div>
      </div>
  );
}

export default Record;